<template>
  <div class="box1">
    <div v-if="username">
      <p @click="back" style="padding-left: 0.4rem; margin-top: 0.4rem"><</p>
      <div class="top">
        <p style="float: left">头像</p>
        <p style="float: right" @click="shang">
          <van-uploader
            src="../../../public/1.png"
            style="width: 2rem; height: 0.1rem; margin-top: -0.4rem"
            alt=""
            v-model="fileList"
            multiple="“false”"
            reupload="false"
            max-count="1"
          />
          <span
            style="
              display: inline-block;
              margin-left: 0.2rem;
              margin-right: 0.1rem;
              color: #ccc;
            "
            >></span
          >
        </p>
      </div>
      <div style="padding-left: 0.4rem; padding-right: 0.4rem">
        <div class="main" @click="use">
          <p style="float: left">昵称</p>
          <p style="float: right">
            <input
              type="text"
              v-model="inpu"
              style="border: none; width: 2.2rem"
            />
            <span style="color: #ccc">></span>
          </p>
        </div>
        <div class="main" @click="zhang">
          <p style="float: left">账号设置</p>
          <p style="float: right; color: #ccc">></p>
        </div>
        <div class="main">
          <p style="float: left">隐私</p>
          <p style="float: right; color: #ccc">></p>
        </div>
        <div class="main">
          <p style="float: left">当前版本</p>
          <p style="float: right">4.0.0</p>
        </div>
      </div>
      <div class="footer">
        <button
          style="
            width: 100%;
            height: 1rem;
            border: none;
            background-color: #fff;
            color: red;
            font-size: 0.4rem;
            margin-top: 0.5rem;
          "
          @click="out"
        >
          退出登录
        </button>
      </div>
    </div>
    <div v-else></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant'
const username = localStorage.getItem('username')
const router = useRouter()
const zhang = () => {
  router.push('/login/zhang')
}
const back = () => {
  router.push('/ding/index')
}
const use = () => {
  router.push('/login/use')
}
const shang = () => {
  console.log(1)
}
const out = () => {
  showConfirmDialog({
    title: '提醒',
    message: '确定退出吗',
  })
    .then(() => {
      // on confirm
      localStorage.removeItem('username')
      console.log(1)
      setTimeout(() => {
        router.push('/ding/index')
      }, 1000)
    })
    .catch(() => {
      // on cancel
      console.log(2)
    })
}

const fileList = ref([
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
])

const inpu = ref('fhajksflkas')
const name = localStorage.getItem('name')
if (name) {
  inpu.value = name
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 1rem;
  /* border: 1px solid #ccc; */
  margin-top: 0.1rem;
  clear: both;
}
.top {
  width: 100%;
  height: 1.5rem;
  border-bottom: 10px solid #f7f7f7;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.box1 {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  font-size: 0.35rem;
}
</style>

